import React, { Component } from 'react'

import './Item.css'

export default class Item extends Component {
    // 初始化鼠标经过状态
    state = {mouse:false}
    
    // 鼠标经过离开改变状态
    handleMouse(flag) {
        return () => {
            this.setState({ mouse: flag });
        }
    }
    // 勾选更新App里的todo对象
    onChangeFn(id) {
        return (event) => {
            this.props.updateTodo(id, event.target.checked);
        }
    }
    // 删除一个todo的回调
    handleCheck = (id) => {
        if (window.confirm('确定删除吗？')) {
            this.props.deleteTodo(id); 
        }
    }

    render() {
        const {id, name, done } = this.props;
        let { mouse } = this.state;
        return (
            <li style={{backgroundColor:mouse?'#ddd':'#fff'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                <label>
                    <input type="checkbox" checked={done} onChange={ this.onChangeFn(id) } />
                    <span>{ name }</span>
                </label>
                <button onClick={()=>{this.handleCheck(id)}} className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
            </li>
        )
    }
}
